<template>
  <!-- 头部 -->


  <div class="divBox">
    <el-icon class="toggle-btn" @click="toggleCollapse">
      <Operation />
    </el-icon>
    <div class="system-title">电商后台管理系统</div>
    <div>
      <span class="welcome">
        您好，{{ $store.state.username }}
      </span>
      <el-button type="text" @click="logout">退出</el-button>
    </div>
  </div>
</template>

<script setup>

import {

  Operation
} from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'


//引入路由
import { useRouter, useRoute } from 'vue-router'

//  引入 vuex

import { useStore } from 'vuex'
const store = useStore()

const router = useRouter()
const route = useRoute()

console.log(route)

const emit = defineEmits(['change'])

const props = defineProps(['isCollapse'])
const toggleCollapse = () => {
  // alert('xx')
  emit('change', props.isCollapse ? false : true)
}


// 1 给出提示 是否真的要退出
// 2 如果取消 那么什么都不做
// 3  如果确定退出  
// 3.1  清除 vuex里面的token   本地缓存的token  
// 3.2  跳转到登录页面 

const logout = () => {
  ElMessageBox.confirm(
    '真的要退出吗?',

    {
      confirmButtonText: '退出',
      cancelButtonText: 'C取消',
      type: 'warning',
    }
  )
    .then(() => {



      store.commit('clearToken', '') // 清除token 
      window.localStorage.removeItem('vuex')


      router.replace('/login?redirect=' + route.fullPath)


    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消退出',
      })
    })
}




</script>

<style lang="scss" scoped>
.divBox {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.logo {
  height: 60px;
  background: url('../../assets/vue.svg');
  background-size: cover;
  background-color: #989898;
}

.toggle-btn {
  font-size: 36px;
  color: #989898;
  cursor: pointer;
  line-height: 60px;
}

.system-title {
  font-size: 28px;
  color: white;
}

.logout-btn {
  color: orange;
}
</style>